<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>淘宝搜索</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        .top{
            width: 1070px;
            height: 44px;
            margin:0 auto;
        }
        .top img{
            display: block;
            width: 105px;
            height: 43px;
            float:left;
        }
        .search {
            width: 978px;
            height: 40px;
            margin-left: 154px;
        }
        .top div input{
            display: block;
            height: 29px;
            width: 660px;
            float:left;
            margin: 4.5px 0 0 0;
            border:2px  solid orangered;
        }
        .top a{
            width: 80px;
            height:35px;
            float:left;
            border:0;
            margin:4.5px 0 0 0;
            background-color: orangered;
            display: block;
            text-decoration: none;
            text-align: center;
            line-height: 35px;
            font-size: 17px;
            color:white;
        }
        .top div input{
            font-size: 14px;
            padding-left: 5px;
        }






        .bottom{
            width: 1070px;
            height: 57px;
            margin: 30px 0 0 600px;
        }
        .first{
            background-color:orangered;
            color:white ;
        }

        .bottom a{
            float: left;
            width: 35px;
            height: 35px;
            display: block;
            color: #404040;
            font-size: 14px;
            border: 1px solid lightgray;
            text-align: center;
            line-height: 35px;
            text-decoration: none;
            margin: 0 auto;

        }
        .bottom input{
            width: 37px;
            height: 23px;
        }






    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>Header</el-header>
        <el-main>
            <!--搜索框-->
            <div class="top">
                <img src="./imgs/logo-so-420-172.png" alt="">
                <div class="search">
                    <a href="" style="margin-left: 100px">宝贝</a>
                    <input type="text" value="手机">
                    <a href="">搜 索</a>
                </div>
            </div>
            <!--筛选列-->
            <div></div>
            <!--商品列-->
            <div></div>
            <!--底部选择分页-->
            <div class="bottom">
                <a href="" style="width: 70px;">上一页</a>
                <a href="" class="first">1</a>
                <a href="">2</a>
                <a href="">3</a>
                <a style="border:0;">...</a>
                <a href="">100</a>
                <a href="" style="width: 70px;">上一页</a>
                <a style="width: 65px;border: 0;"> 共100页,</a>
                <a style="width: 100px;border: 0;"> 到第 <input  type="text" value="2"> 页 </a>
                <a style="width: 45px;height: 23px;margin-top: 6px;line-height: 23px;" href="">确定</a>
            </div>

        </el-main>
        <el-footer>Footer</el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>

<script src="js/data.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {}
        }
    })
</script>
</html>